<template>
    <div class="root">
        <div class="back fa fa-chevron-left fa-lg" @click="out"></div>
        <div class="container">
            <div class="nav">
                <timers></timers>
            </div>
            <div class="main">
                <div class="head"><img :src="userHead" alt="" width="100%" height="100%"></div>
                <div class="time">
                    <h2>{{time.hour | format(time)}}:{{time.min | format(time)}}:{{time.sec | format(time)}}</h2>
                    <p>{{mession.task}}</p>
                </div>
            </div>
            <div class="foot">
                <button @click="out">结束</button>
                <button @click="suspend">暂停</button>
            </div>
        </div>
        <div class="confim_bg" ref="confirm">
            <div class="confirm">
                <div class="text">
                    <h3>确认退出教室吗</h3>
                    <p>本次学习时间{{this.alltime}}分钟</p>
                </div>
                <div class="btns">
                    <button @click="yes">是</button>
                    <button @click="no">否</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userHead:'',
            time:{
                sec:0,
                min:0,
                hour:0
            },
            mession:{
                task:'',
                time:0
            },
            alltime:0,
            timer:null
        }
    },
    filters:{
        format:(ev,time)=>{
            if(ev<=9){
                // console.log(time.min)
                return '0'+ev
            }else{
                return ev
            }
        }
    },
    watch:{
        'time.sec':function(newdval,oldval){
            if(newdval === 60){
                this.time.min++
                this.time.sec = 0
            }
        },
        'time.min':function(newdval,oldval){
            if(newdval === 60){
                this.time.hour++
                this.time.min = 0
            }
        }
    },
    mounted(){
        this.$store.state.userMsg.push(window.sessionStorage.getItem('userMsg'))
        this.userHead = JSON.parse(this.$store.state.userMsg[0]).header
        console.log(this.$store.state)
        this.mession.task = this.$store.state.taks
        this.mession.time = this.$store.state.messiontime
        // console.log(this.userHead)
        this.starstudy()
    },
    methods:{
        starstudy(){
            this.timer = setInterval(()=>{
                this.time.sec++
            },1000)
        },
        out(){
            // console.log('hhh')
            clearInterval(this.timer)
            this.$refs.confirm.style.display = 'flex'
            this.$refs.confirm.style.opacity = '1'
            this.alltime = (this.time.hour*60) + (this.time.min)
        },
        suspend(e){
            if(e.target.innerHTML === '暂停'){
                clearInterval(this.timer)
                e.target.innerHTML = '继续'
            }else{
                this.starstudy()
                e.target.innerHTML = '暂停'
            }
        },
        yes(){
            window.sessionStorage.setItem('hasstudy',this.alltime)
            this.$router.push('/home/maillist')
        },
        no(){
            this.starstudy()
            this.$refs.confirm.style.display = 'none'
        }
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 100vh;
        background: url('../assets/img/studyroom.jpg') center center no-repeat;
        position: relative;
        .back{
            position: absolute;
            top: 35px;
            left: 15px;
            color: #fff;
        }
    }
    .nav{
        height: 25px;
    }
    .container{
        width: 100%;
        height: 100%;
        // background-color: rosybrown;
        display: flex;
        flex-direction: column;
        // align-items: center;
    }
    .main{
        width: 100%;
        height: 50px;
        flex-grow: 1;
        // background-color: #2ecc71;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        .head{
            width: 110px;
            height: 110px;
            border-radius: 50%;
            overflow: hidden;
            margin-top: 120px;
        }
        .time{
            margin-top: 30px;
            p{
                margin-top: -2px;
                text-align: center;
            }
        }
    }
    .foot{
        width: 100%;
        height: 80px;
        // background-color: #e67e22;
        display: flex;
        justify-content: center;
        align-items: center;
        button{
            width: 100px;
            height: 45px;
            margin: 0 25px;
            border-radius: 25px;
            background: none;
            outline: none;
            border: 2px solid #fff;
            color: white;
            font-size: 15px;
            letter-spacing: 2px;
        }
        button:nth-child(1){
            background-color: #fff;
            color: black;
        }
    }
    .confim_bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .3);
        display: flex;
        justify-content: center;
        align-items: center;
        // transition: 2s all ease-in-out;
        opacity: 0;
        display: none;
        .confirm{
            width: 50%;
            height: 14%;
            // background-color:skyblue;
            border-radius: 15px;
            margin-top: 150px;
            overflow: hidden;
            background-color: rgb(250, 250, 250);
            .text{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 62%;
                // background-color: magenta;
                font-size: 13px;
                border-bottom: 1px solid #ccc;
                h3{
                    margin-bottom: 5px;
                }
                p{
                    color: rgb(125, 125, 125);
                }
            }
            .btns{
                width: 100%;
                height: 38%;
                button{
                    width: 50%;
                    height: 100%;
                    border: none;
                    outline: none;
                    color: rgb(3, 123, 255);
                    background: none;
                }
                button:nth-child(1){
                    border-right: 1px solid #ccc;
                }
            }
        }
}
</style>
